<script lang="ts" setup>


import {ref, type Ref} from 'vue'
import {ossResourceServer} from "@/apis/OssResourceServer";


const cover: Ref<HTMLMediaElement | null> = ref(null);
const props = defineProps({
  thumbnail: {
    type: String,
    required: false,
  }
})
if (props.thumbnail !== undefined) {
  ossResourceServer.getOssResource(props.thumbnail).then((response) => {
    if (cover.value !== null) {
      cover.value.src = URL.createObjectURL(new Blob([response.data]))
    }
  })
}

</script>


<template>
  <div class="article__profile__card__root">
    <img class="cover" ref="cover" alt="cover"/>
    <!--    TODO 文章简介卡片布局 -->
    <article class="article__profile">
      <a href="">
        <h4 class="profile__card__title">
          <slot name="title"/>
        </h4>
      </a>
      <p class="custom__content__wrapper">
        <slot name="custom__content"/>
      </p>
    </article>
  </div>
</template>


<style lang="scss" scoped>
.article__profile__card__root {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  //grid-column-gap: var(--s/pacing-s);
  overflow: hidden;
  //border-radius: var(--border-radius-s);
  background-color: #706eff;
  border-radius: 4px;
  //padding: var(--spacing-xs);
}

.cover {
  height: 100%;
  width: 100%;
  overflow: hidden;
  object-fit: cover;
  grid-column: 1 / 3;
}

.article__profile {
  grid-column: 3 / -1;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  height: 100px;
  padding: var(--spacing-xs);

  a{
    color: var(--color-link);
  }
  .profile__card__title {
    grid-row: 1 / 2;
    line-height: 1.2;
  }
}

.custom__content__wrapper {
  overflow: scroll;
  grid-row: 2 / -1;
  line-height: 1.2;
}


</style>